/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Cell, Table, TableBody, TableRow, Text,} from "customize-easy-ui-component";
import {RepLink} from "../../common/base";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

export const 锅炉简图View= ({theme, orc, rep} :{theme: any, orc:any, rep:any}
) => {
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
      <Text id='BoilerDiagram' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>锅炉简图</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["62%","%"]  }   css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight  miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'BoilerDiagram'}>
          <TableRow>
            <Cell colSpan={2} split={true} css={{"@media print": {height: undefined}, padding: 0}}>
              {orc.简图说明 &&
                  <div css={{whiteSpace: 'pre-wrap'}}>
                    {orc.简图说明 || '／'}
                  </div>
              }
              {!(orc?._FILE_S简图?.length>0) && !orc.简图说明 && <Text css={{textAlign: 'center',display:'block'}}>空的，进入上传吧</Text>}
              {orc?._FILE_S简图?.map(({name, url}: any, i: number) => {
                return <div key={i} css={{"@media print": {pageBreakInside: 'avoid' } }}>
                  {i>0 && <hr/>}
                  <div css={{display: 'flex',justifyContent: 'space-around',alignItems: 'center',}}>
                    { url &&
                        <img src={process.env.REACT_APP_OSS_ENDP+url} alt={url}
                             css={{
                               maxHeight: '14cm',
                               maxWidth: '-webkit-fill-available',
                               [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                               "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                             }}
                        />
                    }
                  </div>
                </div>
              }) }
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
    <Text css={{fontSize:'0.7rem'}}>
    </Text>
  </>;
};
